<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 声明响应式变量value
const value = ref("");
// 跳转到about页面
const onClickLeft = () => {
history.go(-1);
};
</script>

<template>


<van-sticky >
<van-search
v-model="value"
right-icon="search"
left-icon=""
background="#9e7f44"
shape="round"
placeholder="请输入搜索关键词"
@search="onSearch"
@click-left-icon="onClickLeft"
to="sreach"
>
<template #left>
<van-icon name="arrow-left"   @click="onClickLeft"/>

</template>
</van-search>
</van-sticky>

<div style="background-image: url(http://pic.mdcdn.cn/h5/pic/202303/6b626e961392160877d3ebdb21374040.jpg);">
<van-cell center  style="opacity: 0.5 ;">

<template #title>
    <span class="custom-title" >智慧家小家电会员店</span>
    </template>

<template #label>
    <van-tag type="primary">官方</van-tag>
    <span class="custom-title">店铺粉丝:386</span>
</template>

<template #value>
    <div background="#00000066">
    <van-button
    color=""
icon="plus"
plain hairline round type="small"
>
订阅
</van-button>
</div></template></van-cell>


<van-notice-bar color="black" background="white" delay
left-icon="volume-o"
text="【通知】1.受天气影响，3月2日起黑龙江、山西、哈尔滨、新疆、宁夏、陕西等部分省市区域派送、退换货等服务受限，会出现延迟或停滞；2.受系统、仓库盘点、疫情区域等影响，如您的订单/售后单等出现未及时处理的情况，请您联系店铺在线客服反馈；3.注意防范诈骗，如有疑问请联系官方渠道在线客服咨询。"
style="opacity: 0.5 ;"/>

<!--轮播图-->
<div style="text-align: center;">
	<van-swipe class="my-swipe" :autoplay="2000000" indicator-color="white">
<van-swipe-item><van-image
width="350"
height="196"
fit="contain"
src="//pic.mdcdn.cn/h5/pic/202303/6ba971b791c038032f44891e73919383.jpg"
/>

</van-swipe-item>
<van-swipe-item>
</van-swipe-item>
</van-swipe>
</div>
<!---插一张图片-->


<div style="display: flex;margin-top: 10px;">
    <img src="https://pic.mdcdn.cn/h5/pic/202303/8dc4381bc0adc88885a50d08a14a28a6.png" style="width: 174px;height: 133px;margin-left:14px ;">
    <img src="https://pic.mdcdn.cn/h5/pic/202303/57477595e98788f4da03803978a48529.png" style="width: 174px;height: 133px;margin-left:14px ;">
</div>
<div style="margin-top: 15px; width: 354px;margin-left: 15px;">
	<van-grid :column-num="4" :border=false icon-size="48">
<van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_454.png?t=20230207" text="电饭煲" />
<van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_455.png?t=20230207" text="电压力锅" />
<van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_461.png?t=20230207" text="电风扇" />
<van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_456.png?t=20230207" text="电磁炉" />
<van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_457.png?t=20230207" text="电水壶" />
<van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_460.png?t=20230207" text="料理机" />
<van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_459.png?t=20230207" text="空气炸锅" />
<van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_463.png?t=20230207" text="蒸炖煎" />

</van-grid>
</div>

<div style="text-align: center;font-size: 16.64px;color: #333333; margin-top: 15px;opacity: 0.5 ; font-weight:bolder">热销商品</div>

    

<van-card class="s-card" >
<template #tags> 

    <van-grid :column-num="2" :center="false" :gutter="10" >

    <van-grid-item  to="info">
	<div><van-tag type="warning">官方正品</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="123.99"
height="123.99"
src="https://pic.mdcdn.cn/pc/pic/202303/4c9a6f4a9646f84ae2af23cb35380ef3.jpg?x-oss-process=image/resize,limit_0,w_280,h_280"
/>
<div style="margin-bottom: 15px;">【新品】【Hot】1.5L安睡柔声破壁机 8重降噪 陶瓷不沾发热盘 一键清洗</div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥8899</div>
	<p style="color: #333333; font-size:14px ;">¥2939 <van-tag type="primary" color="#333333">PRO精选</van-tag></p>
	</div>
	<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />	
</div>
</van-grid-item>


<van-grid-item  to="info">
	<div><van-tag type="warning">官方正品</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="123.99"
height="123.99"
src="https://pic.mdcdn.cn/pc/pic/202302/47d611d10b8e53b75c0ac2329d02c542.jpg?x-oss-process=image/resize,limit_0,w_280,h_280"
/>
<div style="margin-bottom: 15px;">【新品】13L电蒸锅 家用早餐机面包机 速蒸锁嫩 三层自有组合 ZGE272202  </div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥8899</div>
	<p style="color: #333333; font-size:14px ;">¥2939 <van-tag type="primary" color="#333333">PRO精选</van-tag></p>
	</div>
	<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />
</div>
</van-grid-item>
</van-grid>
</template>
</van-card>

</div>

<van-tabbar v-model="active">
<van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item icon="apps-o">分类</van-tabbar-item>
<van-tabbar-item icon="friends-o">场景</van-tabbar-item>
<van-tabbar-item icon="service-o">客服</van-tabbar-item>
</van-tabbar>



<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>
<!-- 开启底部安全区适配 -->
<van-number-keyboard safe-area-inset-bottom />




</template>


<style lang="less" scoped>
//底部
</style>